<template>
  <div class="headers">
    <div class="headers_left">
      <i class="el-icon-edit-outline"></i>
      <router-link class="headers_left_items" to="/layout/porject">
        <div>小程序开发</div>
      </router-link>
      <router-link class="headers_left_items" to="/layout/porject">
        <div>管理后台</div>
      </router-link>
      <router-link class="headers_left_items" to="/layout/porject">
        <div>营销网站</div>
      </router-link>
      <router-link class="headers_left_items" to="/layout/porject">
        <div>品牌网站</div>
      </router-link>
    </div>
    <div class="headers_right">
      <span>Contact me</span>
      <i class="el-icon-s-promotion"></i>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="less">
  .headers{
    padding: 0 2.604vw!important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .headers_left{
      display: grid;
      grid-auto-flow: column;
      justify-content: center;
      align-items: center;

      i{
        font-size: 1.302vw;
        margin-right: 2.646vw;
      }

      .headers_left_items{
        color: #555;
        font-size: .833vw;
        margin-right: 3.646vw;
      }
    }

    .headers_right{
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        font-size: .833vw;
        color: #555;
      }

      i{
        font-size: 1.302vw;
        margin-left: 1.042vw;
        color: #d96e2b;
      }
    }
  }
</style>